<template>
    <div class="page">
        <nav-bar title="银行卡管理" @click-left="$router.back()" @click-right="addBankCard">
            <template v-slot:right>
                <van-icon name="plus" style="font-weight:bold" />
            </template>
        </nav-bar>
        <div class="con">
            <div class="cell" v-for="item in bankList" :key="item.code">
                <van-cell center :title="item.accountNo" :label="item.bankName" :value="item.status|bankStatus" is-link @click="$refs.bankDetailRef.show(item.bankCardCode)"></van-cell>
            </div>
        </div>
        <BankDetail ref="bankDetailRef"></BankDetail>
    </div>
</template>

<script>
import { Tag } from 'vant';
import BankDetail from "@/module/views/bankManager/bankDetail"

export default {

    components: { Tag, BankDetail },

    data() {
        return {
            bankList: [],
        }
    },

    mounted() {
        this.$http.bankList().then(resp => {
            if (resp === false) {
                return resp
            }
            this.bankList = resp
        });
    },

    methods: {
        addBankCard() {
            this.$router.push("/bankAdd")
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/color.scss";
</style>